<link href='/static/fullcalendar/fullcalendar/fullcalendar.css' rel='stylesheet'/>
<link href='/static/fullcalendar/fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print'/>

<script src='/static/fullcalendar/lib/jquery.min.js'></script>

<script src='/static/fullcalendar/lib/jquery-ui.custom.min.js'></script>
<script src='/static/fullcalendar/fullcalendar/fullcalendar.min.js'></script>
<style>
    #calendar {
        width: 100%;
        margin: 0 auto;
    }
    #calendar .fc-header-title h2{
        font-weight: bold;
        color: red;
    }
    #calendar tr.fc-week td:nth-child(6),
    #calendar tr.fc-week td:nth-child(7){
        color: red;
    }
    .fc-widget-header, .fc-widget-content {
        border: 1px solid #ddd !important;
    }
    .fc-grid .fc-day-number {
        float: left;
        padding: 5px 10px;
        font-weight: bold;
    }
    .fc-state-highlight { /* <td> today cell */ /* TODO: add .fc-today to <th> */
        background: #4e6ef2;
        color: #ffffff!important;
        border-radius: 10px;
    }

</style>
<div id="clock"></div>
<div id='calendar'></div>
<script>
    $(document).ready(function () {
        $('#calendar').fullCalendar({
            nowIndicator: true,            //周/日视图中显示今天当前时间点（以红线标记），默认false不显示
            monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], //月份自定义命名
            monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], //月份缩略命名（英语比较实用：全称January可设置缩略为Jan）
            dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],       //同理monthNames
            dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],  //同理monthNamesShort
            weekNumberTitle: "周",         //周的国际化,默认为"W"
            firstDay:1,
            editable: false,
            events: [],
            contentHeight: "300",
            buttonText: {
                today: '今天',
                month: '月',
                week: '周',
                day: '日'
            },
            eventColor: '#3BB2E3', // 全部日历日程背景色
        });
    });

    function updateClock() {
        var now = new Date();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();
        document.getElementsByClassName('fc-header-center')[0].innerHTML = hours + ':' + (minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
    }
    setInterval(updateClock, 1000); // 每秒更新一次时钟
    updateClock(); // 页面加载时立即更新时钟

</script>
